<template>
<div class="wrap">
    <div class = 'scrollWrap' style = 'background: #fff; height: 100%;'>
      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'>
          </div>
          <div class='rightPart filterPart'>
            <el-date-picker
                v-model="dateArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter1.type">
              <el-option label="待随访" value="0"></el-option>
              <el-option label="已完成" value="1"></el-option>
            </el-select>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter2.type">
              <el-option label="患者姓名" value="0"></el-option>
              <el-option label="手机号后四位" value="1"></el-option>
              <el-option label="就诊卡号" value="2"></el-option>
            </el-select>
            <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter2.keyWord">
            </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>

          </div>
        </div>
      </div>
      <complex-table 
        :columnsType= '"index"' 
        :list = 'tableList1' 
        :totalList = 'totalList1' 
        :theadList = "myFollowConst.theadList1" 
        :operationButtons = 'myFollowConst.operationButtons1'
        @initListQuery = 'initListQuery'
        @getSelectArr = 'getSelectArr' 
        @getListByPagination = 'getTableList1'
        @operationEvent1 = 'operationEvent1_1' >
      </complex-table>
    </div>
</div>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import waves from '@/directive/waves/index.js'
  import * as myFollowConst from './myFollowConst.js'
  import { getMyFollowup, cancelFollowup } from '@/api/myhome'
  export default {
    components: { complexTable },
    data() {
      return {
        myFollowConst,
        dateArr: [],
        filter1: {
          keyWord: '',
          type: '0',
          todayFlag: false,
          page: 1,
          limit: 5
        },
        filter2: {
          keyWord: '',
          type: '0',
          page: 1,
          limit: 5
        },
        activePanel: 'pending',
        dialogLeftTop1_1: false,
        dialogLeftTop1_2: false,
        dialogLeftTop1_3: false,
        formLabelWidth: '120px',
        filterContainer: {},
        tableList1: [],
        tableList2: [],
        selectArr: [],
        totalList1: 0,
        totalList2: 0
      }
    },
    mounted() {
      this.getTableList1(this.filter1)
      // this.getDoctorList()
    },
    methods: {
      initListQuery(listQuery) {
        this.filter1.limit = listQuery.limit
        this.filter1.page = listQuery.page
        this.filter2.limit = listQuery.limit
        this.filter2.page = listQuery.page
      },
      operationEvent1_0(row) {
        this.dialogLeftTop1_3 = !this.dialogLeftTop1_3
        this.dialogLeftTop1_3_data = Object.assign({}, this.dialogLeftTop1_3_data, row)
      },
      operationEvent1_1(row) {
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancelFollowup({ id: row.id }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            if (this.tableList1.length === 1) {
              this.listQuery.page = (this.listQuery.page - 1 <= 0 ? 1 : this.listQuery.page - 1)
            }
            this.handleFilter(this.listQuery)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      operationEvent1_2(row) {
      },
      operationEvent2_0(row) {
        this.$router.push('/appointmentConfirm/registerAppointment')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              message: '恭喜你，预约成功！',
              type: 'success',
              duration: 2000
            })
            this.$refs[formName].resetFields()
            this.dialogLeftTop1_1 = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleFilter(listQuery) {
        const query = Object.assign({}, listQuery, this.filter1)
        this.getTableList1(query)
      },
      todayAppointment() {},
      propagandaAndEducation() {
        if (!this.selectArr.length) {
          this.$message({
            message: '请先选择宣教对象！',
            type: 'warning'
          })
          return
        }
        this.dialogLeftTop1_2 = true
      },
      getSelectArr(selectArr) {
        this.selectArr = selectArr
      },
      handleClick(tab, event) {
      },
      getTableList1(listQuery) {
        var self = this
        console.log(listQuery)
        getMyFollowup({
          type: listQuery.type,
          followupStatus: 0,
          keyword: listQuery.keyWord,
          current: listQuery.page,
          pageSize: listQuery.limit,
          startTime: self.dateArr[0],
          endTime: self.dateArr[1]
        }).then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            if (res.data.data.records.length > 0) {
              for (const item of res.data.data.records) {
                item.id = item.appointmentId
              }
            }
            this.tableList1 = res.data.data.records
            this.totalList1 = res.data.data.total
          }
        })
      }
    },
    directives: {
      waves
    }
  }
</script>
<style lang="scss">
.wrap{
  .scrollWrap{
    height: 100%;
    overflow: auto;
    background-color: #fff;
    padding-top: 10px;
    
    .el-tabs__header{
      padding-left: 20px;
    }
  }
  .filterBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .filterPart{
      line-height: 2;
    }
  }
  .dialogLeftTop1_1{
    .el-dialog{
      overflow: auto;
    }
    .el-dialog__header{
      border-bottom: 1px solid #ddd;
    }
    .el-date-editor{
      width:190px;
    }
  }
  .dialogLeftTop1_2{
    .el-select{
      display: block;
    }
  }
  .dialogLeftTop1_3{
    .box-card{
      background: #eee;
    }
    .el-dialog__header{
      border-bottom: 1px solid #ddd;
    }
    .el-dialog{
      height: 80%;
      margin-top: 10vh !important;
      overflow: auto;
    }
  }
}
</style>
